<template>
    <div>
        <div class="note" :style="note">
            <div class="inform">
                <span>阵地建设</span>
            </div>
            <div class="tabs">
                <ly-tab v-model="selectedId" :items="items" :options="options" @change="handleChange"></ly-tab>
            </div>
        </div>
        <div class="waterfall">
            <div class="item" v-for="(item,index) in list" :key="index">
                <img :src="item.photo" alt=""
                     onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'"
                     @click="Oclicks(item)">
                <div class="txt">
                    <p>{{item.explain}}</p>
                </div>
                <!-- 未收藏 -->
                <img src="@as/img/zhendijianshe_axhui.png" alt="" class="ax" v-if="item.is_like==0"
                     @click="Zan(item.id)">
                <!-- 已收藏 -->
                <img src="@as/img/zhendijianshe_axred.png" alt="" class="ax" v-if="item.is_like==1"
                     @click="Zan(item.id)">
            </div>

        </div>

        <!-- 图片我们弹窗 -->
        <div class="mebs" v-if="shous" @click="vanishs">
            <div class="boxts">
                <img :src="pic" alt=""
                     onerror="this.onerror=null;this.src='https://media.71ydj.com/FitPjkxAJxdRFRVrDCq1sTKxxgtf'">
            </div>
        </div>
        <!--<div class="loading" >{{loaded}}</div>-->
    </div>
</template>

<script>
    import LyTab from "@cp/index";

    export default {
        components: {
            LyTab
        },
        data() {
            return {
                shous: false,
                pic: '',
                loaded: '没有更多数据了...',
                list: [],
                selectedId: 0,
                bottomSelectedId: 0,
                org_type: 1,
                items: [
                    {label: "活动室", org_type: "1"},
                    {label: "宣传栏", org_type: "2"},
                    {label: "微信群", org_type: "3"}
                ],
                options: {
                    activeColor: "#333",
                    color: "#999"
                },
                note: {
                    backgroundImage: "url(" + require("@as/img/zhendijianshe_card_shadow.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                },
            }
        },
        mounted() {
            this.$progress.done();
        },
        methods: {
            vanishs: function () {
                this.shous = false;
            },
            Oclicks: function (item) {
                this.shous = true;
                this.pic = item.photo;
            },
            handleChange(item, index) {
                let that = this;
                that.org_type = item.org_type
                console.log(that.org_type)
                this.getList()
            },
            async getList() {
                let that = this;
                try {
                    let params = {
                        uid: JSON.parse(Cookies.get('user_71ydj')).id,
                        org_id: JSON.parse(Cookies.get('user_71ydj')).organization_id,
                        type: that.org_type
                    }
                    //org_id=150&uid=50&type=1
                    // ?org_id=150&uid=50&type=1
                    const url = `/app/position/index`
                    let res = await that.$http.get(url, params)
                    that.$progress.done()
                    if (res.code === 200) {
                        that.list = res.data;
                        if (res.data.length == 0) {
                            that.loaded = "暂无数据";
                        }
                    }
                } catch (e) {
                    console.log('​catch -> e', e)
                }
            },
            //点赞 取消点赞
            async Zan(idx) {
                let that = this;
                try {
                    let params = {
                        id: idx,
                        uid: JSON.parse(window.Cookies.get("user")).id,
                    }
                    const url = `/app/position/position_like`
                    let res = await that.$http.post(url, params)
                    that.$progress.done()
                    if (res.code === 200) {
                        that.getList();
                    }
                } catch (e) {
                    console.log('​catch -> e', e)
                }
            },
        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped lang="scss">
    .mebs {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 99999;
    }

    .boxts {
        background: #FFF;
        width: 100%;
        position: fixed;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 999999;
        border-radius: 8px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    /deep/ .ly-tab-active-bar {
        background: -webkit-linear-gradient(left, #eb4e44, #f47447);
        background: -o-linear-gradient(right, #eb4e44, #f47447);
        background: -moz-linear-gradient(right, #eb4e44, #f47447);
        background: linear-gradient(to right, #eb4e44, #f47447);
        border-radius: 10px;
    }

    .note {
        padding: 38px 15px 15px 15px;
        box-sizing: border-box;
        width: 100%;
        position: relative;
    }

    .inform {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 25px;
        span {
            font-size: 28px;
            color: #000;
            font-weight: bold;
        }
    }

    .tabs {
        margin-top: 20px;
        display: flex;
        justify-content: flex-start;
        width: auto;
        margin-left: -15px;
        element.style {
            background-color: red !important;
        }
    }

    .waterfall {
        width: 100%;
        padding: 15px 15px;
        box-sizing: border-box;
        column-gap: 15px;
        column-count: 2;
        position: absolute;
        margin-top: -15px;
    }

    .item {
        margin-bottom: 10px;
        break-inside: avoid;
        box-shadow: 0px 6px 15px 2px #f1f1f1;
        border-radius: 5px;
        overflow: hidden;
        position: relative;
    }

    .loading {
        width: 100%;
        font-size: 14px;
        color: #dddddd;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 24px;
    }
    .ax {
        width: 15px;
        height: 12.5px;
        position: absolute;
        top: 15px;
        right: 15px;
        z-index: 20;
    }

    img {
        width: 100%;
    }

    .txt {
        width: 100%;
        padding: 0 15px 10px 15px;
    }

    .txt p {
        font-size: 12px;
        color: #666;
    }

    .waterfall {
        column-count: 2;
    }

</style>
<style scoped lang="scss">
    div .mu-tabs {
        position: relative;
        z-index: 97;
        height: 40px;
        margin-bottom: 15px;
        background: none !important;
        margin-top: 40px;
    }

    div .mu-tab-link-highlight {
        width: 16px !important;
        height: 4px !important;
        background: rgba(244, 117, 72, 1);
        border-radius: 2px;
        margin-left: 28px;
    }

    div .mu-tab {
        font-size: 14px;
        font-family: PingFang-SC-Medium;
        font-weight: 500;
        color: #333;
    }

    div .mu-tab-active {
        font-size: 18px;
        font-family: PingFang-SC-Medium;
        font-weight: bold;
        color: #333;
    }

</style>
